<template>
  <div>
    <div class="top_parent">
      <img src="../../assets/image/book/book_banner.png" style="width:100%" alt />
      <div class="bread">
        <p>
          <router-link to="/">首页</router-link>》 典藏 》 藏品检索
        </p>
      </div>
    </div>
    <div class="dh_bg">
      <div>
        <ul class="daohang">
          <li
            @click="tiaoz1(index + 1)"
            v-for="(item, index) of nav"
            :class="{ border: index == i }"
            :key="index"
          >
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <router-view @checked="checked"></router-view>
    </div>
    <foot2 class="dibu"></foot2>
  </div>
</template>
<script>
import foot2 from "../../components/foot2";
export default {
  data() {
    return {
      nav: [
        { name: "瓷器" },
        { name: "玉器" },
        { name: "书画" },
        { name: "古籍" },
        { name: "杂项" },
        { name: "其他" },
      ],
      i: "",
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 12, // 每页显示数量
      currentPageData: [],
      sort: "",
    };
  },
  components: {
    foot2: foot2,
  },
  create() {},
  // props: [""],
  methods: {
    checked(val) {
      this.i = val - 1;
    },
    tiaoz1(i) {
      // console.log(this.$router, 999);
      this.i = i - 1;
      // if (i == 1) {
      if (i == 1) {
        this.sort = "8a7aef0958b37e280158b38d781e0033";
      } else if (i == 2) {
        this.sort = "8a7aef0958b37e280158b38e61b4003b";
      } else if (i == 3) {
        this.sort = "8a7aef0958b37e280158b39114d30057";
      } else if (i == 4) {
        this.sort = "8a7aef0958b37e280158b391666e005b";
      } else if (i == 5) {
        this.sort = "8a7aef0958b37e280158b38ffed8004b";
      } else if (i == 6) {
        this.sort =
          "8a7aef0958b37e280158b391b34d005f" ||
          "4028c2526174389e016182f203ca002c" ||
          "8a7aef0958b37e280158b38ffed8004b" ||
          "8a7aef0958b37e280158b38fabab0047" ||
          "8a7aef0958b37e280158b390a8290053" ||
          "8a7aef0958b37e280158b38f0331003f" ||
          "8a7aef0958b37e280158b3933a730073";
      }
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: i,
            bool: true,
            sort: this.sort,
            symbol: i,
          },
        })
        .catch((err) => {
          err;
        });
    },
  },
};
</script>
<style scoped>
ul,
a {
  text-decoration: none;
  color: #6e6e6e;
}
li,
p {
  margin: 0px;
  padding: 0px;
}
.top_parent {
  position: relative;
}
.top_parent .bread {
  max-width: 1200px;
  margin: auto;
}
.top_parent p {
  position: absolute;
  bottom: 20px;
  color: #6e6e6e;
}
.dh_bg {
  margin-top: -3px;
}
.daohang {
  display: flex;
  height: 60px;

  justify-content: space-between;
  max-width: 1100px;
  margin: auto;
}
.daohang li {
  text-align: center;
  font-size: 24px;
  width: 50px;

  line-height: 60px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  box-sizing: border-box;
}

.border {
  border-bottom: 2px solid rgb(0, 54, 103);
}
li {
  list-style: none;
  cursor: pointer;
}

.cpjs {
  max-width: 1300px;
  margin: auto;
  padding-top: 20px;
}
.bg_pic {
  width: 100%;
}

.show {
  /* max-width:1200px; */
  display: flex;
  margin: auto;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 42px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.show_k {
  margin-top: 26px;
  position: relative;
}
.layer {
  width: 91%;
  height: 50px;
  background-color: rgba(25, 25, 25, 0.5);
  bottom: 23px;
  position: absolute;

  left: 12px;
  vertical-align: center;
  color: white;
  text-align: center;
}
.layer > div {
  position: absolute;
  font-size: 18px;
  height: 30px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  right: 0px;
  margin: auto;
}

/* fenye */
.page-bar {
  margin: 40px auto;
  margin-top: 60px;
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
